<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Block Layout: Complex Margin Collapse</title>
        <link rel="author" title="Azul Layout" href="https://azul.rs/" />
        <meta name="flags" content="" />
        <meta name="assert" content="Block layout should correctly collapse margins in various scenarios including nested elements." />
        <style type="text/css">
            * { margin: 0; padding: 0; }
            body {
                width: 800px;
                height: 600px;
                padding: 20px;
                background: #141e30;
            }
            .container {
                width: 100%;
                background: white;
            }
            .box {
                background: #667eea;
                margin: 30px 20px;
                padding: 20px;
            }
            .nested-container {
                background: #ffffff;
                margin: 40px 0;
                padding: 0;
            }
            .nested-box {
                background: #f093fb;
                margin: 50px 20px;
                padding: 15px;
            }
            .no-collapse {
                background: #4facfe;
                margin: 25px 20px;
                padding: 20px;
                border: 1px solid transparent;
            }
            .inner {
                background: #ffffff;
                margin: 30px 0;
                height: 40px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box">
                <div class="inner"></div>
            </div>
            <div class="nested-container">
                <div class="nested-box">
                    <div class="inner"></div>
                </div>
            </div>
            <div class="box">
                <div class="inner"></div>
            </div>
            <div class="no-collapse">
                <div class="inner"></div>
            </div>
            <div class="box">
                <div class="inner"></div>
            </div>
        </div>
    </body>
</html>
